<template>
    <div>
        <el-card style="width: 700px;margin: auto;">
            <div slot="header" class="clearfix">
                <span>编辑账单</span>
            </div>
            <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="80px">
                <el-form-item label="账单名称" prop="billName">
                    <el-input v-model="ruleForm.billName"></el-input>
                </el-form-item>
                <el-form-item label="账单编号" prop="billNumber">
                    <el-input v-model="ruleForm.billNumber"></el-input>
                </el-form-item>
                <el-form-item label="收费周期" prop="chargeCycle">
                    <el-input-number v-model="ruleForm.chargeCycle" controls-position="right" :min="1" :max="99999"
                        style="width: 500px;">
                    </el-input-number> 月
                </el-form-item>
                <el-form-item label="收费项目" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择项目" @change="shoufei()">
                        <el-option label="水费" value="水费"></el-option>
                        <el-option label="电费" value="电费"></el-option>
                        <el-option label="燃气费" value="燃气费"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计算公式" prop="payState">
                    <el-input v-model="ruleForm.payState" disabled></el-input>
                </el-form-item>
                <el-form-item label="金额" prop="money">
                    <el-input v-model="ruleForm.money"></el-input>
                </el-form-item>
                <el-form-item label="收款方" prop="payee">
                    <el-select v-model="ruleForm.payee" placeholder="请选择公司" @change="shoufei()">
                        <el-option label="南方电力公司" value="南方电力公司"></el-option>
                        <el-option label="北京电力公司" value="北京电力公司"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addBill('ruleForm')">提交</el-button>
                    <el-button @click="$router.push('/bill')">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: [],
            rules: {
                billName: [
                    { required: true, message: '请输入账单名称', trigger: 'blur' },
                ],
                billNumber: [
                    { required: true, message: '请输入账单编号', trigger: 'blur' }
                ],
                chargeCycle: [
                    { required: true, message: '请输入收费周期', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择收费项目', trigger: 'change' }
                ],
                money: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ],
                payee: [
                    { required: true, message: '请选择收款方', trigger: 'change' }
                ],
                // remark: [
                //     { required: true, message: '请输入车辆数量', trigger: 'blur' }
                // ]
            }
        }
    },
    created() {
        this.ruleForm = this.$route.query.paramName
        console.log(this.ruleForm)

    },
    methods: {
        shoufei(){
            // console.log("AAAA")
            if(this.ruleForm.type=='水费'){
                this.ruleForm.address= '1元/升'
            }else if(this.ruleForm.type=='电费'){
                this.ruleForm.address= '1元/度'
            }else {
                this.ruleForm.address= '1元/㎡'
            }
        },
        addBill() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // debugger
                    this.$axios
                        .post("systemuser/payment-type/updateBill", this.ruleForm)
                        .then(res => {
                            if (res.data.code == 20000) {
                                this.$message({
                                    type: 'success',
                                    message: "提交成功"
                                })
                                this.$router.push('/bill')
                            } else {
                                this.error = res.data.data.error
                                this.$message({
                                    type: 'error',
                                    message: this.error
                                })
                            }
                        });
                }

            })
        },
    }
}
</script>
<style>
</style>